<link rel="stylesheet" href="/static/user/css/iconfont.css">
<style>
    .list-data{
        width: 220px;
        height: 106px;
        overflow-x: auto;
    }
    .list-data::-webkit-scrollbar{
        width: 2px;
    }
    .list-data::-webkit-scrollbar-thumb{
        background-color: #FF5555;
    }
    .list-data-item{
        width: 204px;
        height: 42px;
        line-height: 42px;
        padding: 5px 8px;
    }
    .data-item{
        display: inline-block;
    }
    .list-data-item-img{
        width: 42px;
        height: 42px;
    }
    .list-data-item-info p{
        width: 152px;
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .icon-shanchu{
        cursor: pointer;
    }
    .icon-shanchu:hover{
        color: #eb0742;
    }
    .list-count{
        width: 204px;
        height: 50px;
        padding: 10px 8px 14px 8px;
        background-color: #f5f5f5;
        position: absolute;
        bottom: 0;
    }
    .list-count-item{
        width: 204px;
        height: 28px;
        line-height: 28px;
        position: relative;
    }
    .red{
        color: #eb0742;
    }
    .cart_total_price{
        font-size: 14px;
    }
    .jiesuan_btn{
        width: 72px;
        height: 28px;
        line-height: 28px;
        background-color: #eb0742;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        position: absolute;
        right: 0;
        cursor: pointer;
    }
    .jiesuan_btn:hover{
        background-color: #FF5555;
    }
    /* 购物车列表为空 */
    .null-list{
        padding-top: 45px;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>
<div class="header">
    <!-- 头部图片 -->
    <div class="topimg">
        <img src="/static/user/images/header.jpg" alt="商城头部图片">
    </div>
    <div class="bar">
        <div class="bar-container">
            <ul class="bar-left-side">
                {empty name="$Think.session.user"}
                <li class="left-side-item">
                    <a href="/login">请登录</a>
                    <span style="color: #ccc;">|</span>
                    <a href="/register">免费注册</a>
                </li>

                {else}
                <li class="left-side-item">
                    欢迎你!{$Think.session.user.name}
                    <span style="color: #ccc;"> | </span>
                    <a href="/user/User/logout">注销</a>
                </li>

                {/empty}
            </ul>

            {empty name="$Think.session.user"}
                <ul class="bar-right-side">
                    <li class="right-side-item"><a href="/login">会员中心</a><i class="iconfont icon-jiantou" style="color: #bbbbbb; vertical-align: middle;"></i></li>
                    <div class="drop-list">
                        <a href="/login">登录后查看</a>
                    </div>
                </ul>
            {else}
            <ul class="bar-right-side">
                <li class="right-side-item"><a href="/person">会员中心</a><i class="iconfont icon-jiantou" style="color: #bbbbbb; vertical-align: middle;"></i></li>
                <div class="drop-list">
                    <a href="/order">我的订单</a>
                    <a href="/comment">我的评价</a>
                    <!-- <a href="">我的余额</a>
                    <a href="">我的红包</a> -->
                    <a href="/person">我的收藏</a>
                    <a href="/address">修改收货地址</a>
                </div>
            </ul>
            {/empty}
        </div>
    </div>
    <div class="logo-area clearfix">
        <div class="logo-area-container">
            <div class="logo">
                <img src="/static/user/images/guangonglogo.jpg" alt="">
            </div>
            <div class="search-area">
                <div class="search">
                    <input type="text" name="" id="" placeholder="请输入商品名称">
                    <button class="search-btn" onclick="window.location.href='/user/index/search?name='+$(this).siblings('input').val()">搜 索</button>
                </div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="nav-container">
            <a href="">
                <div class="all-category">
                    全部商品分类<i class="iconfont icon-sanjiaoxing all-category-icon"></i>
                    <ul class="all-category-droplist">
                        <li class="all-category-droplist-item"><a style="display: block" href="/user/index/getcategoods?id=2">特色肉食</a></li>
                        <li class="all-category-droplist-item"><a style="display: block" href="/user/index/getcategoods?id=1">膨化食品</a></li>
                        <li class="all-category-droplist-item"><a style="display: block" href="/user/index/getcategoods?id=11">干果类食品</a></li>
                    </ul>
                </div>
            </a>
            <a class="nav-item focuson" href="/user/index/index">首页</a>
            <a class="nav-item" href="/user/index/getcategoods?id=2">特色肉食</a>
            <a class="nav-item" href="/user/index/getcategoods?id=1">膨化食品</a>
            <a class="nav-item" href="/user/index/getcategoods?id=11">干果类食品</a>
            <div class="nav-item cart">
                <a href="/user/cart/getcart"><span class="cart-logo">
                    <i class="iconfont icon-gouwuche"><span class="nums" id="totalnums">{$total_num}</span></i>
                    去购物车结算
                </span>
                <span class="cart-sanjiaoxing"><i class="iconfont icon-sanjiaoxing" style="display: inline-block; font-size: 25px;"></i></span>
                </a>
                <div class="cart-drop-list">
                    {if $cartarr==1}
                    <div class="null-list">
                        <p class="cart-drop-list-item"><i class="iconfont icon-gouwuche"></i></p>
                        <p class="cart-drop-list-item txt">购物车空啦</p>
                        <p class="cart-drop-list-item txt">爱Ta，就带Ta来购物车吧</p>
                    </div>
                    {else}
<!--                     若购物车不为空-->
                    <ul class="list-data">
                        {volist name="cartarr" id="c"}
                        <li class="list-data-item">
                            <div class="data-item list-data-item-img">
                                <img src="/static/admin/uploads/{$c.thumb}" alt="{$c.goods_name}">
                            </div>
                            <div class="data-item list-data-item-info">
                                <p class="list-data-item-info-title">{$c.goods_name}</p>
                                <p class="list-data-item-info-detail clearfix">
                                    <span class="red">{$c.sale_price}</span> × <span class="goodnum">{$c.num}</span>
                                    <a onclick="delcart(this)" ><i class="iconfont icon-shanchu right clearfix" style="font-size: 12px;"></i></a>
                                    <input type="hidden" value="{$c.id}" class="goods_id">
                                </p>
                            </div>
                        </li>
                       {/volist}
                    </ul>
                    <div class="list-count">
                        <div class="list-count-item">共 <span class="allnum red">{$total_num}</span> 件商品哦~</div>
                        <div class="list-count-item">
                            总价：<span class="cart_total_price red">{$sum_price}</span>
                            <button  onclick="tiaozhuan()"  class="jiesuan_btn">去结算</button>
                        </div>
                    </div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function tiaozhuan() {
        window.location.href="/user/order/setorder";
    }
    function delcart(_this) {
        $.ajax({
            type:'post',
            url:"/user/cart/delcart",
            data:{'id':$(_this).siblings('.goods_id').eq(0).val()
            },
            dataType:'json',
            success:function(res){

                $('.cart_total_price').html(res.sum_price);
                $('.allnum').html(res.total_num);
                $('#totalnums').html(res.total_num);
                $(_this).parent().parent().parent().remove();
                if(res.sum_price==0){
                    $('.cart-drop-list').html('<div class="null-list"><p class="cart-drop-list-item"><i class="iconfont icon-gouwuche"></i></p><p class="cart-drop-list-item txt">购物车空啦</p><p class="cart-drop-list-item txt">爱Ta，就带Ta来购物车吧</p></div>');
                }
            }
        });
    }
</script>